Drawable 有分很多種，在這邊就分享筆者最常用的 ShapeDrawable 以及一些範例。

在刻畫面的時候常常會有一些動態的需求，比如說按鈕點擊後加深顏色，之類的
在這時候就可以自製出 drawable 來解決，完成一些在 layout 完成不了的操作。

除了這個需求，如果有很常出現的元件，也可以設個 shape drawable 做整理，往後就只需要對這個元件加上 background 就可以了。

在 res 資料夾底下的 drawable，New 一個 Drawable Resource File

建立好以後就會看到 seletor 用角括號括好了

selector

selector 是放在最外面的。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

</selector>

裡面只可以新增 item，那我們就建立一個 item 的 tag

item

item 可以添加屬性，代表他的狀態，比如說，加入 android:state_pressed 的屬性

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <!--按壓時-->
    </item>
    <item android:state_pressed="false">
        <!--非按壓時-->
    </item>
</selector>

當他被按壓的時候就會跑上面的，反之則下面。就可以達到按壓和非按壓時顏色不一樣的效果了。

當然也可以不加屬性，那就永遠都跑它裡面

shpae

shape 要在 item 標籤裡面建立。它能夠控制外觀和顏色。它也有很多屬性，其中的 android:shape="" 就負責控制形狀

• rectangle: 方形 (預設)
• ring: 環形
• oval: 圓或橢圓
• line: 線

以下就用預設的方形繼續介紹

之後就能用 tag 在 shape 裡面選擇它的外觀

• solid: 單色填滿
• stroke: 邊框
• padding: 內邊距
• corners: 圓角
• gradient: 漸層填滿
• size: 大小

size 和 padding 就不在這裡多做介紹了

solid: 單色填滿

• color: 填滿顏色

底下只有一種屬性，填入顏色就可以有效果了

<solid android:color="@android:color/darker_gray"/>

stroke: 實線或虛線邊框

• color: 邊框的顏色
• width: 邊框的寬度
• dashGap: 每個虛線之間的距離
• dashWidth: 每個虛線的長度

<stroke    
    android:color="@android:color/white"
    android:width="20dp"
    android:dashGap="20dp"
    android:dashWidth="50dp"/>

corners: 圓角

可以對 rectangle 增加圓角的效果。

除了用 radius 令所有角增加效果以外，還可以對個別的角設定。

<corners android:radius="20dp"/>

gradient: 漸層填滿

其中的漸層填滿有分為三種顏色

• start color
• center color
• end color

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient android:startColor="@color/colorPrimary"
                android:centerColor="@color/colorPrimaryDark"
                android:endColor="@color/colorAccent"/>
        </shape>
    </item>
</selector>

也可以只加兩個顏色。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient android:startColor="@color/colorPrimary"
                android:endColor="@color/colorAccent"/>
        </shape>
    </item>
</selector>

還能再更改角度，不過，角度只能改成 45 的倍數。
android:type=""

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient android:startColor="@color/colorPrimary"
                android:centerColor="@color/colorPrimaryDark"
                android:endColor="@color/colorAccent"
                android:angle="180"/>
        </shape>
    </item>
</selector>

還能用 android:type="" 改變漸層的類型，預設為 linear。

若為 radial 還要再加上 gradientRadius 的屬性調整半徑。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient android:startColor="@color/colorPrimaryDark"
                android:centerColor="@color/colorAccent"
                android:endColor="@color/colorPrimary"
                android:type="radial"
                android:gradientRadius="400dp"/>
        </shape>
    </item>
</selector>

使用

只要改元件的 background 為預先做好的 drawable 就可以看到效果了

<Button
        android:id="@+id/btnMainSave"
        android:text="save"
        android:background="@drawable/shape_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>